<template>
  <div class="container">
    <div class="search_wrap">
      <el-form label-position="right" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="订单号：" prop="">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="来源：" prop="">
              <el-select placeholder="请选择">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="产品类型：" prop="">
              <el-select placeholder="请选择">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产品名称：" prop="">
              <el-input />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="订单日期：" prop="">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客户类型：" prop="">
              <el-select placeholder="请选择">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客户名：" prop="">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="订单状态：" prop="">
              <el-select placeholder="请选择">
                <el-option label="0" :value="0" />
                <el-option label="1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col align="right" :span="6">
            <el-button type="primary" @click="toSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <div class="tabel_wrap">
        <el-table
          v-loading="listLoading"
          class="table"
          :data="list"
          element-loading-text="Loading"
          :row-class-name="getRowClassName"
          border
          fit
          highlight-current-row
          >
          <el-table-column align="center" label="订单号" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row.orderNumber }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="来源" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户类型" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户名" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品类型" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品名称" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="产品有效期" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="订单日期" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="购买音符数" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="实付" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row. }} -->
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="see(scope.row.id)">查看</el-button>
              <el-button size="mini" type="warning" @click="see(scope.row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderInfo } from '@/api/order'
export default {
  filters: {

  },
  data() {
    return {
      search: {
        name: ''
      },
      total: 0,
      listQuery: {
        pageIndex: 0,
        pageSize: 10
      },
      listLoading: false,
      list: []
    }
  },
  mounted() {

  },
  methods: {
    toSearch() {

    },
    resetSearch() {

    },
    fetchData() {
      const newData = this.objectCon(this.listQuery, this.search)
      this.listLoading = true
      getOrderInfo(newData).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getRowClassName({ rowIndex }) {
      // 判断奇偶行
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
    }
  }
}
</script>
